function createMainPanel()
{
    var west_item = new Ext.Panel({
        region: 'west',
        contentEl: 'west-div',
        split: true,
        border: true,
        collapsible: true,
        width: 200,
        minSize: 120,
        maxSize: 200,
        layout: "fit",
        items: [{ html: '<div id="north-div"><div id="queryPanel"></div><div id="tree"></div></div>'}]
    });

    var center_south_item = new Ext.TabPanel({
        region: 'center',
        contentEl: 'center-south',
        split: true,
        collapsible: true,
        titlebar: false
    });

    new Ext.Viewport({
        layout: "border",
        items: [west_item, center_south_item]
    });

    var north_item = new Ext.Panel({
        title: 'Filter Panel',
        renderTo: 'queryPanel',
        region: 'north',
        split: true,
        border: true,
        collapsible: true,
        minSize: 50,
        maxSize: 120,
        height: 200,
        items: [
			    { id: "TestPlan", xtype: "label", text: "TestPlan" },
                { id: "TestPlanSelector", fieldLabel: "TestPlan", xtype: "combo", displayField: "Name",
                    store: new Ext.data.SimpleStore({ fields: ["Name"], data: [["1"], ["2"], ["3"], ["4"], ["5"], ["6"]] }),
                    width: 100, height: 22, mode: "local", triggerAction: "all",
                    allowBlank: false, allowNegative: false}],
        buttons: [{ text: 'Apply Filter', handler: function()
        {
            //
        }
        },
                    { text: 'Reset', handler: function() { } }]
    });




}


function convertHierarchyDataToExtTreeRootNode(hierarchyDataArray)
{
    var treeNodes = new Array();

    for (var i = 0; i < hierarchyDataArray.length; i++)
    {
        var hierarchyData = hierarchyDataArray[i];
        var nodeParentValue = "";
        eval("nodeParentValue=hierarchyData.ParentHierarchyDataId");

        if (nodeParentValue == null || nodeParentValue == "")
        {
            var nodeText = "";
            var nodeValue = "";
            eval("nodeText=hierarchyData.Name");
            eval("nodeValue=hierarchyData.HierarchyDataId");
            //var isChecked = isTheNodeValueSelected(nodeValue);
            var treeNode = { text: nodeText, id: nodeValue, editable: false, expanded: true };
            convertHierarchyDataToExtTreeDataSource(treeNode, hierarchyDataArray);

            if (treeNode.children == undefined || treeNode.children == null)
                treeNode.leaf = true;
            else
                treeNode.leaf = false;

            treeNodes.push(treeNode);
        }


        return { children: treeNodes };
    }
}

function convertHierarchyDataToExtTreeDataSource(parentTreeNode, hierarchyDataArray)
{
    if (hierarchyDataArray.length == 0) return;

    for (var i = 0; i < hierarchyDataArray.length; i++)
    {
        var hierarchyData = hierarchyDataArray[i];
        var nodeParentValue = "";
        eval("nodeParentValue=hierarchyData.ParentHierarchyDataId");
        if (nodeParentValue != parentTreeNode.id) continue;

        if (parentTreeNode.children == undefined || parentTreeNode.children == null)
            parentTreeNode.children = new Array();

        var nodeText = "";
        var nodeValue = "";
        eval("nodeText=hierarchyData.Name");
        eval("nodeValue=hierarchyData.HierarchyDataId");

        //var isChecked = isTheNodeValueSelected(nodeValue);
        var treeNode = { text: nodeText, id: nodeValue, editable: false, expanded: true };
        parentTreeNode.children.push(treeNode);

        convertHierarchyDataToExtTreeDataSource(treeNode, hierarchyDataArray);
        if (treeNode.children == undefined || treeNode.children == null)
            treeNode.leaf = true;
        else
            treeNode.leaf = false;
    }
}

function createTree()
{
    var TestProjectHierarchyId = $("#<%=TestProjectHierarchyId.ClientID%>").val();
    var planId = Ext.getCmp("TestPlanSelector").getValue();
    var hierarchyDataArray;

    var ajaxSetting = {
        async: false,
        url: '/Services/TestCenterService.svc/json/GetTestCaseSuitesInTestPlan/' + TestProjectHierarchyId + '/' + planId,
        type: 'GET',
        contentType: "application/json",
        timeout: 10000,
        dataType: "json",
        timeout: 10000,
        success: function(response, option) { hierarchyDataArray = response.GetChildrenTreeNodeResult },
        failure: function() { alert("Network issue,please try again!"); }
    };
    jQuery.ajax(ajaxSetting);



    var tree = new Ext.tree.TreePanel(
        {
            id: "TestProject",
            el: "tree",
            useArrows: false,
            autoScroll: true,
            width: 200,
            height: 800,
            collapsible: false,
            enableDD: false,
            rootVisible: false,
            title: "TestProject",
            preloadChildren: true,
            root: convertHierarchyDataToExtTreeRootNode(hierarchyDataArray)
            //loader: treeLoader
        });
    //tree.setRootNode(rootNode); 
    tree.render();
    tree.getRootNode().expand(false, false);

    var suiteId;

    if (tree.root.firstChild)
        suiteId = tree.root.firstChild.id;

    function ontreeclick(node, e)
    {
        $("#TestCaseManagement").attr("src", "~/TestCaseResultManagement/DynamicPage.svc?suite=" + node.id);
    }
    tree.on('click', ontreeclick);

    var navigationItem = "~/TestCaseResultManagement/DynamicPage.svc";

    if (suiteId)
        navigationItem += "?suite=" + suiteId;



    var iFramePageUrl = navigationItem + (navigationItem.indexOf('?') > -1 ? '&' : '?') + 'stamp=' + (new Date()).format('YmdHisu');



    var tabPanelHtml = '<iframe id="TestCaseResultManagement" tabid="0" src="' + iFramePageUrl + '" frameborder="0" width="100%" class="tabInnerIFrame" scrolling="no"></iframe>';


    var createdComponent = center_south_item.add(
			{
			    id: '0',
			    title: 'TestCaseResultManagement',
			    closable: false,
			    autoScroll: false,
			    header: false,
			    html: tabPanelHtml,
			    listeners:
				{
				    resize: function(component, adjWidth, adjHeight, rawWidth, rawHeight)
				    {
				        if (component == undefined) return;

				        if (rawHeight != undefined)
				        {
				            $("#TestCaseResultManagement").height(rawHeight);
				        }
				        else
				        {
				            var height = component.getHeight();
				            $("#TestCaseResultManagement").height(height);
				        }

				        $("#TestCaseResultManagement").width("100%");
				    },
				    beforedestroy: function(component)
				    {
				        var iframeElement = Ext.getDom("TestCaseResultManagement");
				        if (iframeElement)
				        {
				            var tabIdToRemove = component.getId();
				            openedNavigationItemIdArray = openedNavigationItemIdArray.remove(tabIdToRemove);
				            if (Ext.isIE) iframeElement.src = "javascript:false";
				            Ext.removeNode(iframeElement);
				            Ext.destroy(iframeElement);
				        }

				        return true;
				    }
				}
			});

    createdComponent.fireEvent("resize");

}

